<template>
  <ul
    :list="list"
    class="ant-list-items ant-list-bordered"
    @drop="onDrop"
    @dragover="onDragOver"
  >
    <li
      class="ant-list-item"
      :class="{active: item.id === selectedId, ghost: dragData.currentDragging === item.id}"
      v-for="(item, index) in list" :key="item.id"
      @click="handleClick(item.id)"
      @dragstart="onDragStart($event, item.id, index)"
      @dragenter="onDragEnter($event, index)"
      :data-index="index"
      draggable="true"
    >
      <a-tooltip :title="item.isHidden ? '显示': '隐藏'">
        <a-button shape="circle" @click.stop="handleChange(item.id, 'isHidden', !item.isHidden)">
          <template v-slot:icon v-if="item.isHidden"><EyeOutlined /> </template>
          <template v-slot:icon v-else><EyeInvisibleOutlined /> </template>
        </a-button>
      </a-tooltip>
      <a-tooltip :title="item.isLocked ? '解锁' : '锁定'">
        <a-button shape="circle" @click.stop="handleChange(item.id, 'isLocked', !item.isLocked)">
          <template v-slot:icon v-if="item.isLocked"><UnlockOutlined /> </template>
          <template v-slot:icon v-else><LockOutlined /> </template>
        </a-button>
      </a-tooltip>
      <inline-edit :value="item.layerName" @change="(value) => {handleChange(item.id, 'layerName', value)}"></inline-edit>
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive } from 'vue'
import arrayMove from 'array-move'
import { EyeOutlined, EyeInvisibleOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons-vue'
import { ComponentData } from '../store/editor'
import InlineEdit from '../components/InlineEdit.vue'
import { getParentElement } from '../helper'
export default defineComponent({ 
  props: {
    list: {
      type: Array as PropType<ComponentData[]>,
      required: true
    },
    selectedId: {
      type: String,
      required: true
    }
  },  
  emits: ['select', 'change', 'drop'],
  components: {
    EyeOutlined,
    EyeInvisibleOutlined,
    LockOutlined,
    UnlockOutlined,
    InlineEdit
  },
  setup (props, context) {
    const dragData = reactive({
      currentDragging: '',
      currentIndex: -1
    })
    let start = -1
    let end = -1
    const handleClick = (id: string) => {
      context.emit('select', id)
    }
    const onDragStart = (e: DragEvent, id: string, index: number) => {
      dragData.currentDragging = id
      dragData.currentIndex = index
      start = index
    }
    const onDragEnter = (e: DragEvent, index: number) => {
      if (index !== dragData.currentIndex) {
        console.log('enter', index, dragData.currentIndex)
        arrayMove.mutate(props.list, dragData.currentIndex, index)
        dragData.currentIndex = index
        end = index
      }
    }
    const onDrop = (e: DragEvent) => {
      context.emit('drop', {start, end})
      dragData.currentDragging = ''
    }
    const onDragOver = (e: DragEvent) => {
      e.preventDefault()
    }
    const handleChange = (id: string, key: string, value: boolean) => {
      const data = {
        id,
        key,
        value,
        isRoot: true
      }
      context.emit('change', data)
    }
    return {
      handleChange,
      handleClick,
      onDragStart,
      dragData,
      onDrop,
      onDragOver,
      onDragEnter
    }
  }
})
</script>

<style scoped>
.ant-list-item {
  padding: 10px 15px;
  transition: all 0.5s ease-out;
  cursor: pointer;
  justify-content: normal;
  border: 1px solid #fff;
  border-bottom-color: #f0f0f0;
}
.ant-list-item.active {
  border: 1px solid #1890ff;
}
.ant-list-item.ghost {
  opacity: .5;
}

.ant-list-item:hover {
  background: #e6f7ff;
}
.ant-list-item > * {
  margin-right: 10px;
}
.ant-list-item button {
  font-size: 12px;
}
</style>